<template>
    <div class="upload_file">
        <div class="title">上传文件</div>
        <!-- 数据文件 -->
        <dataFile v-on="$listeners" v-bind="$attrs" v-for="(item, index) in filesConfig" :key="item.timestamp" :list="item"
            @group2="init2" />
        <!-- @group="initGroup" -->
        <div class="main_title" v-if="initialIsGroup.length == 2">
            <span style="margin-right: 15px;">是否分组:</span>
            <el-radio-group v-model="isGroup" @change="changeGroupStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
            </el-radio-group>
        </div>
        <template v-if="Object.keys(group).length > 0 && isGroup == 1 && initialIsGroup.includes('是')">
            <groupList v-on="$listeners" v-bind="$attrs" :group="group"></groupList>
        </template>
        <template v-else-if="Object.keys(group2).length > 0 && isGroup == 0 && initialIsGroup.includes('否')">
            <group2List v-on="$listeners" v-bind="$attrs" :group2="group2"></group2List>
        </template>
        <groupY v-on="$listeners" v-bind="$attrs" :option="groupY" />
        <!-- 提交绘图 -->
        <div class="btn_cloud">
            <el-button type="primary" class="btn_primary" @click="submitDraw" style="border-radius:18px">开始绘图</el-button>
        </div>
    </div>
</template>

<script>
import { deepClone } from '@/utils';
import groupList from './groupList.vue'
import group2List from './group2List.vue'
import groupY from './components/groupY'
import dataFile from './dataFile.vue'
export default {
    components: { dataFile, groupList, group2List, groupY },
    data() {
        return {
            filesConfig: [],
            title: '',
            //预览文件 示例格式
            list: {},
            selectId: null,
            //提交绘图开关
            dataText: null,
            loading: false,
            group: {},
            taskId: '',
            group2: [],
            isGroup: 0,
            initialIsGroup: [],
            groupY: {}
        }
    },
    watch: {
        '$attrs.option': {
            handler(val, newVal) {
                if (val) {
                    this.groupY = deepClone(val)
                    this.init(val)
                    this.initGroup(val.group)
                    this.init2(val.group2)
                }

            },
            deep: true,
            immediate: true
        },
    },
    created() {
        this.isGroupValue(this.$attrs.option.initialIsGroup)
        let name = this.$router.history.current.name
        localStorage.setItem(name, JSON.stringify(this.$attrs.option.group))
    },
    methods: {
        init({ filesConfig, initialIsGroup, isGroup }) {
            this.filesConfig = filesConfig || []
            this.initialIsGroup = initialIsGroup || arr
        },
        isGroupValue(initialIsGroup) {
            if (initialIsGroup.length > 1) {
                this.isGroup = 1
            } else if (initialIsGroup.length === 1 && initialIsGroup.includes('是')) {
                this.isGroup = 1
            } else if (initialIsGroup.length === 1 && initialIsGroup.includes('否')) {
                this.isGroup = 0
            } else {
                this.isGroup = null
            }
            this.changeGroupStatus(this.isGroup)
        },
        init2(value) {
            this.group2 = deepClone(value) || []
        },
        //提交绘图
        submitDraw() {
            this.$emit('submitDraw', 'chartInfo')
        },
        initGroup(value) {
            this.group = deepClone(value) || {}
        },
        changeGroupStatus(value) {
            this.$emit('changeGroupStatus', value)
        },
    }
}
</script>

<style lang="scss" scoped>
.upload_file {
    margin-top: 15px 0;

    .title {
        font-size: 15px;
        color: #666;
    }


}





.btn_cloud {
    float: right;
    margin-top: 15px;

    .determine {
        background-color: #cccccc;
        color: #fff;
    }

    // .btn_primary {
    //     // background: linear-gradient(90deg, #00a6fb, #4481eb);
    //     // border-radius: 18px;
    //     // border: 0;

    //     // &:hover {
    //     //     background: linear-gradient(90deg, #4481eb, #00a6fb);
    //     // }
    // }
}

.main_title {
    padding: 25px 25px 25px 0;
    font-size: 14px;
    color: #333;
    font-weight: 700;
}
</style>